<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>XSM</title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
       .box {
            width: 500px;
            height: 500px;
            margin: 200px auto;
            position: relative;
            -webkit-perspective: 1500px;  
			/*景深，有了它子元素才能产生3D效果 ,加上内核可以实现不同浏览器不同样式*/
        }

        ul {
            width: 500px;
            height: 500px;
            transform-style: preserve-3d;
            /* 规定指定元素的子元素的变换效果是位于3D空间，还是被平展于元素的2D空间 */
            transform: rotateX(-30deg) rotateY(30deg);
            /* 整体给一点角度比较容易看出立体感 */
            animation: 16s spin linear infinite;
        }
        li {
            width: 400px;
            height: 400px;
            list-style-type: none;
            /* 绝对定位,先让li标签重叠 */
            position: absolute;
        }

        ul li img {

            /* 图片和父盒子一样大 */

            width: 100%;

            height: 100%
        }
        /* 调整图片位置组成正方体，此时正方体正对着我们，给ul整体旋转一定角度，更容易看出立体感 */
        ul :nth-child(1){
            transform:rotateY(0deg) translateZ(200px);
        }
        ul :nth-child(2){
            transform: rotateY(-90deg) translateZ(200px);
        }
        ul :nth-child(3) {
            transform: rotateY(-180deg) translateZ(200px);
        }
        ul :nth-child(4){
            transform: rotateY(-270deg) translateZ(200px);
        }
        ul :nth-child(5){
            transform: rotatex(90deg) translateZ(200px);
        }
        ul :nth-child(6){
            transform: rotatex(90deg) translateZ(-200px);
        }
        @keyframes spin
        {
            from
            {
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }
 
            to
            {
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <audio controls="controls" height="100" width="100">
        <source src="videos/枫.mp3" type="audio/mp3" />
        <source src="song.ogg" type="audio/ogg" />
      <embed height="100" width="100" src="audio/当我唱起这首歌.mp3" />
    </audio>
    <div class="box">
        <ul>
            <li>
                <img src="images/1.jpg">
            </li>
            <li>
                <img src="images/2.jpg">
            </li>
            <li>
                <img src="images/3.jpg">
            </li>
            <li>
                <img src="images/4.jpg">
            </li>
            <li>
                <img src="images/5.jpg">
            </li>
            <li>
                <img src="images/6.jpg">
            </li>
        </ul>
    </div>
</body>
<html>